import { getArticlelist } from '@/store/actions/Article'
import { RootState } from '@/types/store'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'
// import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import ArticleItem from '../ArticleItem/ArticleItem'

import styles from './index.module.scss'
type Props={
  id:number
}
const ArticleList = ({id}:Props) => {
  const {channelArticles} = useSelector((state:RootState)=>state.Article)
  const {articles=[],timestamp}=channelArticles[id] || {}
  const hasMore = timestamp!==null
  const dispatch = useDispatch()
  // useEffect(()=>{
  //   dispatch(getArticlelist(id,Date.now()+''))
  // },[dispatch,id])
  const loadMore = async () => {
    // 上拉加载更多
    await dispatch(getArticlelist(id,timestamp || Date.now()+''))
  }
  const onRefresh = async () => {
     //下拉刷新
    await dispatch(getArticlelist(id, Date.now()+''))
  }

  return (
    <div className={styles.root}>
      {/* 文章列表中的每一项 */}
      <PullToRefresh onRefresh={onRefresh}>
      {
        articles.map(item=>(
          <div className="article-item" key={item.art_id}>
          <ArticleItem article={item}/>
        </div>
        ))
      }
      </PullToRefresh>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}

export default ArticleList